<!--
  文件描述：
  创建时间：2023/9/11 15:20
  创建人：二
-->
<template>
  <m-loading :loading="loading">
    <el-card>
      <el-descriptions
        border
        :label-style="labelStyle"
      >
        <template slot="extra">
          <el-button type="primary" @click="handleReturn">返回</el-button>
        </template>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            用户名
          </template>
          {{info['name']}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-message"></i>
            邮箱
          </template>
          {{info['email']}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-location-outline"></i>
            居住地
          </template>
          {{info['address']}}
        </el-descriptions-item>
        <el-descriptions-item span="3">
          <template slot="label">
            <i class="el-icon-tickets"></i>
            备注
          </template>
          <el-tag size="small">学校</el-tag>
        </el-descriptions-item>
        <el-descriptions-item span="3">
          <template slot="label">
            <i class="el-icon-picture"></i>
            图片
          </template>
          <el-image
            :src="imgSrc"
            :preview-src-list="[imgSrc]"
            style="height: 50px"
          />
        </el-descriptions-item>
      </el-descriptions>
    </el-card>
  </m-loading>

</template>

<script>
import { getUserInfoApi } from '@/api/system/user.js'
export default {
  name: 'UserWatch',
  data() {
    return {
      loading: false,
      info: {},
      imgSrc: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
      labelStyle: {
        width: '100px'
      }
    }
  },
  created() {
    this.getUserInfo();
  },
  methods: {
    getUserInfo() {
      this.loading = true;
      getUserInfoApi({
        id: this.$route.query.id
      }).then(res => {
        this.info = res.data;
      }).finally(() => {
        this.loading = false;
      })
    },
    // 返回
    handleReturn() {
      this.$store.dispatch('base/closeTabNav', {
        to: {
          path: '/system/user'
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
